<template>
  <view class="container">
    <block v-if="!loading">
      <view class="userinfo">
        <view>
          {{ userinfo.nickname }}的体测数据
        </view>
        <view class="grid">
          <view class="item">
            <view class="label">
              会籍在线
            </view>
            <view class="value">
              /天
            </view>
          </view>
          <view class="item">
            <view class="label">
              体重
            </view>
            <view class="value">
              {{ latest.weight }}kg
            </view>
          </view>
          <view class="item">
            <view class="label">
              体脂
            </view>
            <view class="value">
              {{ latest.bfat }}%
            </view>
          </view>
        </view>
      </view>
      我的报告
      <view v-if="reports.length">
        <view class="report" v-for="(report, index) in reports" v-if="index < 3" @click="onClickReport(index)">
          <view>{{ report.code }}</view>
          <view class="report-date">{{ report.updatetime }}</view>
        </view>
      </view>
      <view v-else>
        暂无报告
      </view>
    </block>
    <loading v-if="loading"></loading>
    <dp-tabbar :opt="opt"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();

const API = 'http://www.m8000a.com';
const INSID = '08425508611124614756';

export default {
  data() {
    return {
      opt: {},
      loading: false,
      reports: [],
      userinfo: {},
      latest: {}
    };
  },
  onLoad: function (opt) {
    this.opt = app.getopts(opt);
    this.geyUserInfo();
  },
  onPullDownRefresh: function () {
    this.getReports();
  },
  methods: {
    geyUserInfo: function () {
      this.loading = true;
      app.post('ApiMy/levelinfo', {id: this.opt.id}, (res) => {
        this.loading = false;
        if (res.userinfo) {
          this.userinfo = res.userinfo;
          this.getReports();
        }
      });
    },
    getReports: function () {
      this.loading = true;
      // this.userinfo.id = 12345678;
      uni.request({
        url: API + '/bgapi/getrptids',
        data: {
          insid: INSID,
          userid: this.userinfo.id
        },
        success: (res) => {
          if (res.data.content && res.data.content.length) {
            this.reports = [];
            for (let i=0; i<res.data.content.length; i++) {
              this.reports.push({
                code: res.data.content[i],
                updatetime: ''
              });
            }
            for (let i=0; i<res.data.content.length; i++) {
              this.getReportDetail(i, res.data.content[i]);
            }
          }
          this.loading = false;
        }
      });
    },
    getReportDetail: function (index, rptid) {
      this.loading = true;
      uni.request({
        url: API + '/bgapi/getrptdetail',
        data: {
          insid: INSID,
          rptid: rptid,
        },
        success: (res) => {
          if (res.data.content) {
            if (index === 0) {
              this.latest = res.data.content;
            }
            this.reports[index].updatetime = res.data.content.updatetime;
          }
          this.loading = false;
        }
      });
    },
    onClickReport(index){
      uni.navigateTo({
        url: '/pages/my/examination/detail?insid=' + INSID + '&rptid=' + this.reports[index].code
      });
    }
  }
};
</script>
<style>
.container {
  padding: 20px;
  overflow: hidden;
}

.userinfo {
  padding: 20px 20px 0;
  margin: 10px 0;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid #e5e5e5;
}

.userinfo .grid {
  margin: 20px 0;
  display: flex;
  align-items: center;
  text-align: center;
}
.userinfo .grid .item {
  flex: 1;
}
.userinfo .grid .item .label {
  color: #666;
  margin-bottom: 10px;
}

.report {
  padding: 20px;
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
}

.report-date {
  margin-top: 10px;
  font-size: 12px;
  color: #665;
}
</style>
